<template>
    <div class="index" style="width: 100%;margin-top: 3%;">
        <!-- 返回按钮 -->
        <div class="back-btn-container">
            <button class="back-btn" @click="goBack">
                <i class="el-icon-arrow-left"></i>
                <span>返回</span>
            </button>
        </div>
        <div class="main" style="min-height:700px; width: 100%; position: relative;">
            <p style="padding-top: 30px;font-size: 30px;font-family: '宋体', SimSun;">{{ roomlist.roomName }}</p>
            <el-image :src="roomlist.picture" fit="cover" style="width: 100%; height: 400px;"
                :preview-src-list="[roomlist.picture]">
                <template #error>
                    <div class="image-error">加载失败</div>
                </template>
            </el-image>
            <div class="Anchor">
                <div class="AnchorBotton" @click="scrollTo('book-now')">预订</div>
                <div class="AnchorBotton" @click="scrollTo('facilities')">设施</div>
                <div class="AnchorBotton" @click="scrollTo('reviews')">评论</div>
            </div>
            <div class="DetailPriceBox">
                <div class="PriceTitle">价格: <span class="PriceNumber">¥{{ roomlist.price }}</span></div>
            </div>
            <button class="book-btn" @click="goToBookRoom(route.query.id)">立即预约</button>
            <hr />
            <div id="facilities">
                <Infrastructure />
            </div>
            <div class="parting_box">
                <div class="watermark">订房就选睿雅酒店！</div>
            </div>
            <div id="reviews">
                <div class="ReviewsTitle">共 {{ PersonalReviewsList.length }} 条真实评论</div>
            </div>
            <div class="ReviewsScore">
                <div class="ReviewsScoreTitle">房间评分:</div>
                <div class="ReviewsScoreStar">
                    <el-rate v-model="averageScore" disabled show-score text-color="#ff9900" score-template="{value}"
                        class="comment-score" />
                </div>
            </div>
            <div class="ReviewsList">
                <div class="ReviewsListTitle">房间评论:</div>
                <div class="ReviewsListBox">
                    <div v-if="PersonalReviewsList.length > 0">
                        <div v-for="(review, index) in PersonalReviewsList" :key="index" class="review-item">
                            <div class="ReviewsListUseName">用户{{ index + 1 }}:</div>
                            <div class="ReviewsListUseText">{{ review.reviews }}</div>
                            <div class="ReviewsListUseStar">
                                <el-rate v-model="review.score" disabled show-score text-color="#ff9900"
                                    score-template="{value}" class="comment-score" />
                            </div>
                            <div class="ReviewsListHr"></div>
                        </div>
                    </div>
                    <div v-else>
                        <p>暂无评论</p>
                        <div class="ReviewsListHr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import api from '@/api';
import { userStore } from '@/stores/userInfoStore';
import { ElMessage } from 'element-plus';
import Infrastructure from './Infrastructure.vue';

// 使用useRouter钩子获取router实例
const router = useRouter();
const userStoreInfo = userStore();
const RoomDTO = ref([]); // 返回给前端的数据
const route = useRoute();

// 根据id获取对应房间信息
const roomlist = ref([]);
const roomData = ref({
    id: route.query.id, // 唯一标识
    roomName: null, // 房间名
    picture: null, // 房间图片地址
    price: null, // 售价
    roomType: null, // 房间种类
    roomStatus: null, // 房间状态（1空房，2满房，3清理中，4维修中）
    bedNum: null, // 床数量
    hourRoomFlag: null, // 是否可以作为钟点房出售（1是，0否）
    breakfastFlag: null, // 是否提供早餐（1是，0否）

    createTime: null,
    updateTime: null,

    minPrice: null,
    maxPrice: null,
});

const fetchRoomDetail = async () => {
    try {
        const res = await api.getRoomInCondition(roomData.value);
        console.log('id获取对应房间信息:', res);
        if (res.data.code === 1) {
            roomlist.value = res.data.data.list[0] || {};
        } else {
            ElMessage.error(res.data.message || '获取房间信息失败');
        }
    } catch (error) {
        ElMessage.error('网络请求异常');
        console.error('获取房间详情失败:', error);
    }
};

// 接收的个人评论数据列表
const PersonalReviewsList = ref([]);

// 用来存储平均分
const averageScore = ref(0); // 初始化为0

// 计算平均评分的函数
const avgScore = () => {
    if (PersonalReviewsList.value.length === 0) {
        return 0; // 如果没有评论，返回 0
    }
    // 计算所有评分的总和
    const totalScore = PersonalReviewsList.value.reduce((sum, review) => sum + review.score, 0);
    console.log('分数总和', totalScore);
    // 计算平均分并四舍五入，保留一位小数
    const averageScore = (totalScore / PersonalReviewsList.value.length).toFixed(1);
    return parseFloat(averageScore); // 转换为数字类型
};

// 获取评论数据并更新平均分
const fetchReviewsData = async () => {
    try {
        const params = {
            roomId: route.query.id,
        };
        const res = await api.getUserReviewsInCondition(params);
        console.log('id获取对应房间评论:', res);

        if (res.data.code === 1) {
            PersonalReviewsList.value = res.data.data.list || [];
            // 如果有评论数据，更新平均分
            averageScore.value = avgScore();
        } else {
            ElMessage.error(res.data.message || '获取评论失败');
        }
    } catch (error) {
        console.error('获取评论出错:', error);
        ElMessage.error('评论信息请求异常');
    }
};

//滚动定位
const scrollTo = (id) => {
    const element = document.getElementById(id);
    if (element) {
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'start' // 对齐到顶部
        });
    }
};

// 初始化加载数据
onMounted(() => {
    fetchRoomDetail();
    fetchReviewsData();
});

// 导航到OrderRoom
function goToBookRoom(id) {
    router.push({ path: '/room/BookRoomPage', query: { id } });
}
//返回上一页
const goBack = () => {
    router.go(-1); // -1表示返回上一页
};
</script>

<style scoped>
/* 身体部分 */
* {
    box-sizing: border-box;
}

.main {
    /* margin-top: 50px; */
}

/* 图片 */
.DetailPagePic {
    width: 100%;
    /* 宽度设置为100%，由gutter控制间距 */
    height: 400px;
    display: flex;
    margin-top: 25px;
}

/* 图片错误状态样式 */
.image-error {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    color: #999;
}

/* 定位栏 */
.Anchor {
    background: rgb(236, 230, 230);
    height: 60px;
    display: flex;
    justify-content: flex-start;
    padding-left: 30px;
}

.AnchorBotton {
    width: 125px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: black;
    /* 默认文字颜色 */
    transition: color 0.3s;
    /* 添加过渡效果 */
}

.AnchorBotton:hover {
    color: white;
    /* 悬浮时文字变白 */
}

/* 价格 */
.DetailPriceBox {
    height: 50px;
    margin-left: 50px;
}

.PriceTitle {
    font-size: 20px;
    color: #666;
}

.PriceNumber {
    color: black;
    font-size: 30px;
}

/* 立即预约按钮 */
.book-btn {
    /* 基础样式 */
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #FFD700;
    /* 黄色文字 */
    /* 边框样式 */
    background: white;
    /* 白色背景 */
    border: 2px solid #FFD700;
    /* 黄色边框 */
    border-radius: 4px;
    /* 圆角 */
    /* 过渡效果 */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* 隐藏溢出部分 */
    cursor: pointer;
    margin-left: 50px;
}

/* 悬浮效果 */
.book-btn:hover {
    color: white;
    /* 文字变白 */
    background: #FFD700;
    /* 背景变黄 */

    /* 创建白边效果 */
    box-shadow:
        0 0 0 2px white inset,
        /* 内白边 */
        0 0 0 4px #FFD700 inset;
    /* 黄边 */
}

/* 点击效果 */
.book-btn:active {
    transform: scale(0.98);
}

/* 分割线水印框 */
.main .parting_box {
    border-top: 2px solid gray;
    /* 上边框 */
    border-bottom: 2px solid gray;
    /* 下边框 */
    border-left: none;
    /* 左边框不显示 */
    border-right: none;
    /* 右边框不显示 */
    margin-top: 10px;
    /* 外边距 */
    padding: 15px;
    /* 内边距 */
    margin-bottom: 10px;
}

/* 分割线 */
hr {
    border: 1px solid rgb(80, 79, 79);
    margin: 20px 0;
}

.parting_box .watermark {
    font-size: 20px;
    color: rgb(80, 79, 79);
    text-align: center;
}

/* 评论题头 */
.ReviewsTitle {
    text-align: center;
    font-size: 30px;
}

/* 评分 */
.ReviewsScore {
    /* background: green; */
    background: 0;
}

.ReviewsScoreTitle {
    margin-left: 20px;
    font-size: 20px;
}

.ReviewsScoreStar {
    margin-left: 40px;
}

/* 评论 */
.ReviewsList {
    background: 0;
}

.ReviewsListTitle {
    margin-left: 20px;
    margin-bottom: 20px;
    font-size: 20px;
}

.ReviewsListBox {
    margin-left: 30px;
    margin-right: 30px;
    padding-bottom: 20px;
}

.ReviewsListUseName {
    font-size: 18px;
}

.ReviewsListUseText {
    margin-left: 25px;
    color: #666;
    font-size: 16px;
}

.ReviewsListUseStar {
    margin-left: 25px;
}

/* 评论分割线 */
.ReviewsListHr {
    border: 1px solid #666;
    margin: 10px 0;
}

/* 返回按钮容器 */
.back-btn-container {
    position: absolute;
    left: 20px;
    top: 80px;
    z-index: 10;
}

/* 返回按钮样式 */
.back-btn {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #555;
}

.back-btn i {
    margin-right: 5px;
    font-size: 16px;
}

.back-btn:hover {
    background-color: #e6f7ff;
    border-color: #91d5ff;
    color: #1890ff;
    transform: translateX(-3px);
}

.back-btn:active {
    transform: translateX(0);
}

/*整个页面留白*/
@media (max-width: 768px) {
    .myCenter {
        width: 100%;
        /* 减少留白 */
    }
}

@media (max-width: 980px) {
    .myCenter {
        width: 100%;
        /* 移除留白 */
    }
}
</style>